<template>
  <div class="form-designer">

    <lay-scroll height="100%" class="form-designer-left">
      <leftPanel v-model:formArray="formArray" v-model:leftDragIndex="leftDragIndex"></leftPanel>
    </lay-scroll>
    <div class="centerArea">
      <div class="topBar">
        <div class="topBar-btn-item" @click="play">
          <lay-icon type="layui-icon-play" size="15px"></lay-icon>
          <span>运行</span>
        </div>
        <div class="topBar-btn-item" @click="viewJson">
          <lay-icon type="layui-icon-fonts-code" size="20px"></lay-icon>
          <span>查看JSON</span>
        </div>
        <div class="topBar-btn-item" @click="viewCode">
          <lay-icon type="layui-icon-list" size="23px"></lay-icon>
          <span>查看代码</span>
        </div>
        <div class="topBar-btn-item" @click="clear">
          <lay-icon type="layui-icon-delete" size="23px" color="red"></lay-icon>
          <span style="color:red">清空</span>
        </div>
      </div>
      <lay-scroll height="100%" class="form-designer-center">
        <centerForm :formProps="formProps" v-model:formArray="formArray" v-model:chooseIndex="chooseIndex"
          v-model:currentTab="currentTab" v-model:centerDargBgColor="centerDargBgColor" :leftDragIndex="leftDragIndex">
        </centerForm>
      </lay-scroll>
    </div>

    <lay-scroll height="100%" class="form-designer-right">
      <rightForm v-model:formProps="formProps" v-model:formArray="formArray" v-model:chooseIndex="chooseIndex"
        v-model:currentTab="currentTab" @editInMonaco="handleEditInMonaco"></rightForm>
    </lay-scroll>


    <Monaco v-model:show="showMonaco" v-model:showSubmit="showMonacoSubmit" @submit="monacoSubmit" ref="monacoRef"></Monaco>
  </div>

</template>
<script lang="ts">
export default {
  name: "FormDesigner2",
};
</script>
<script setup lang="ts">
import "./index.less";
import "./icon/iconfont.css";
import { ref, shallowRef } from "vue";
import { formComponentsType, formPropsType } from './components'
import leftPanel from './component/leftPanel.vue'
import centerForm from './component/centerForm.vue'
import rightForm from './component/rightForm.vue'
import Monaco from './component/Monaco.vue'
import { layer } from "@layui/layer-vue";
import { useDesigner } from './useDesigner';
import { usePlayGround } from "./usePlayground";

const leftDragIndex = ref(0)
const formArray = ref<formComponentsType[]>([])
const centerDargBgColor = ref('var(--global-checked-color)')
const chooseIndex = ref(-1)
const currentTab = ref("1")
const formProps = ref<formPropsType>({
  name: 'layForm',
  requiredIcons: '',
  model: 'formData',
  rules: 'rules'
})
const monacoRef = shallowRef();
const showMonaco = ref(false);
const showMonacoSubmit = ref(false);

const { generateCode } = useDesigner();
//清空
const clear = () => {
  layer.confirm('确定要清空数据吗', {
    btn:
      [
        { text: '确定', callback: function () { formArray.value = [], layer.closeAll() } },
        { text: '取消', callback: () => { layer.closeAll() } },
      ]
  })
}

//查看json
const viewJson = () => {
  let data = {
    formProps: formProps.value,
    formArray: formArray.value
  }
  monacoRef.value.setValue('json', JSON.stringify(data))
  showMonaco.value = true;
}

//查看代码
const viewCode = () => {
  monacoRef.value.setValue('html', generateCode(formProps.value, formArray.value), 'vue')
  showMonaco.value = true;
}

//运行
const play = async function () {
  const SourceCode = generateCode(formProps.value, formArray.value);
  const { link } = await usePlayGround(SourceCode, false);
  window.open(link);
};

//编辑数据
const editInfo = ref({
  index: 0,
  key: ''
})
const handleEditInMonaco = (event: any) => {
  const { data, dataType, index, key } = event;
  if (dataType === 'json') {
    monacoRef.value.setValue('json', JSON.stringify(data))
  }
  editInfo.value.index = index;
  editInfo.value.key = key;
  showMonaco.value = true;
  showMonacoSubmit.value = true;
}
//monaco提交回调
const monacoSubmit=(data:any)=>{
  //@ts-ignore
  formArray.value[editInfo.value.index].formItemProps[editInfo.value.key]=JSON.parse(data);
}

</script>
<style lang="less">
.form-designer-center .sortable-ghost {
  background-color: v-bind(centerDargBgColor);
  font-size: 0;

  span {
    visibility: hidden;
  }
}
</style>
